body {
	background-color:rgb(245, 255, 255);
}

#com {
    display: flex;
    grid-column: 3;
}
#com-select {
    border-radius: 10px; /* 添加圆角效果 */
}
#com-link {
    padding: 5px 20px;
    background-color: rgb(183, 255, 75);
    border-radius: 10px; /* 添加圆角效果 */
    border: 2px solid #21af21; /* 设置边框宽度、样式和颜色 */
    font-size: small;
}
#com-link:hover {
    transform: scale(1.05);
    transition: transform 0.1s ease-in-out;
    opacity: 90%;
}
#com-link:active {
    transform: scale(0.95);
    transition: transform 0.1s ease-in-out;
    background-color: rgb(102, 170, 0);
}
#com-close {
    padding: 5px 20px;
    background-color: rgb(212, 48, 48);
    border-radius: 10px; /* 添加圆角效果 */
    border: 2px solid #b8681d; /* 设置边框宽度、样式和颜色 */
    font-size: small;
}
#com-close:hover {
    transform: scale(1.05);
    transition: transform 0.1s ease-in-out;
    opacity: 90%;
}
#com-close:active {
    transform: scale(0.95);
    transition: transform 0.1s ease-in-out;
    background-color: rgb(112, 11, 11);
}

#the-xyz {
    display: grid;
    background-color: rgb(240, 240, 240);
}
#last-xyz-div {
    display: flex;
    flex-flow: column;
    background-color: rgb(230, 230, 230);
}
#last-xyz-title {
    padding-left: 25px;
}
#last-xyz {
    display: flex;
}
#last-xyz p {
    margin-right: 30px;
}
#calculate-div {
    grid-column: 3;
    display: flex;
    flex-flow: column;
    background-color: rgb(230, 230, 230);
}
#calculate-select-div {
    display: flex;
    flex-flow: row;
}
#calculate-title {
    padding-left: 15px;
}
#calculate-select {
    font-size: medium;
    border-radius: 5px; /* 添加圆角效果 */
}
#calculate {
    display: flex;
}
#calculate-result-title {
    padding: 0px;
}
#calculate p {
    margin-right: 15px;
}

#view-canvas {

}
#view-side {
    width: 100%;
    background-color: white;
}
#view-side span {
    display: block;
    text-align: center;
    padding: 10px;
    border-bottom: 2px solid #000;
}
#view-side-data {
    width: 100%;
    height: 90%;
    overflow: auto;
}
#view-side-data-clear {
    position: fixed;
    top: 20px;
    right: 30px;
    border: 1px solid #494949;
    border-radius: 5px; /* 添加圆角效果 */
    font-size: smaller;
}
#view-side-data-clear:active {
    transform: scale(0.95);
    transition: transform 0.1s ease-in-out;
    opacity: 50%;
}

.view-container {
    width: 100%;
    height: 480px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    background-color: #000; /* 设置视频区域的背景颜色 */
    display: flex;
}
.controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    background-color: #e0e0e0; /* 设置控制区域的背景颜色 */
    padding: 10px;
    border-radius: 5px; /* 添加圆角效果 */
}
.controls button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4CAF50; /* 设置按钮的背景颜色 */
    color: white; /* 设置按钮文字颜色 */
    border: none;
    border-radius: 5px; /* 添加圆角效果 */
    cursor: pointer;
}
.controls button:hover {
    background-color: #45a049; /* 鼠标悬停时按钮的背景颜色 */
}
.status {
    font-size: 18px;
    margin-bottom: 20px;
    background-color: #f9f9f9; /* 设置状态区域的背景颜色 */
    border-radius: 5px; /* 添加圆角效果 */
}
.statusC {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-auto-rows: 50px;
}
.status div {
    padding: 10px;
    border-radius: 5px; /* 添加圆角效果 */

}
.status span {
    font-weight: bold;
}